<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      @keyframes ColorChange {
        0% {
          outline: 1px solid lightgreen;
        }

        50% {
          outline: 1px solid green;
        }

        1000% {
          outline: 1px solid lightgreen;
        }
      }

      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        outline: 1px solid red;
        animation: ColorChange 500ms ease infinite;
      }

      line,
      polyline,
      rect {
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    </style>
  </head>

  <body>
    <svg width="600"
         height="600"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         stroke-linecap="round"
         stroke-linejoin="round"
         viewBox="0 0 600 600">

      <!--
        patternUnits: 如何排列图案
          objectBoundingBox（默认），根据元素宽高自动添加图形间隙。
          userSpaceOnUse，紧凑填充
        patternContentUnits: 用什么单位表达图像数据
          objectBoundingBox，则路径本身的数据点会基于被填充的对象来确定
          userSpaceOnUse（默认），紧凑填充
      -->

      <defs>
        <pattern id="tile"
                 x="0"
                 y="0"
                 width="20%"
                 height="20%"
                 patternUnits="objectBoundingBox">
          <path d="M 0 0 Q 5 20 10 10 T 20 20"
                style="stroke: black; fill: none;" />
          <path d="M 0 0 h 20 v 20 h -20 z"
                style="stroke: gray; fill: none;" />
        </pattern>
      </defs>
      <defs>
        <pattern id="tile2"
                 patternUnits="objectBoundingBox"
                 patternContentUnits="objectBoundingBox"
                 x="0"
                 y="0"
                 width=".2"
                 height=".2">
          <path d="M 0 0 Q .05 .20 .10 .10 T .20 .20"
                style="stroke: black; fill: none; stroke-width: 0.01;" />
          <path d="M 0 0 h 0.2 v 0.2 h-0.2z"
                style="stroke: black; fill: none; stroke-width: 0.01;" />
        </pattern>
      </defs>
      <defs>
        <pattern id="title"
                 x="0"
                 y="0"
                 width="20"
                 height="20"
                 patternUnits="userSpaceOnUse">
          <path d="M 0 0 Q 5 20 10 10 T 20 20"
                style="stroke: black; fill: none;" />
          <path d="M 0 0 h20 v20 h-20 z"
                style="stroke: gray; fill: none;" />
        </pattern>
      </defs>

      <rect x="0"
            y="0"
            width="100"
            height="100"
            style="fill: url(#title);stroke: pink;" />
      <rect x="120"
            y="0"
            width="140"
            height="125"
            style="fill: url(#tile);stroke: pink;" />
      <rect x="280"
            y="0"
            width="140"
            height="125"
            style="fill: url(#tile2);stroke: pink;" />




      <defs>
        <pattern id="tile3"
                 patternUnits="userSpaceOnUse"
                 x="0"
                 y="0"
                 width="20"
                 height="20"
                 viewBox="0 0 150 150">
          <path d="M30 100 C 50 50, 70 20, 100 100,
               110, 130, 45, 150, 65, 100"
                style="stroke: black; stroke-width: 5; fill: none;" />
        </pattern>
      </defs>
      <rect x="0"
            y="200"
            width="100"
            height="100"
            style="fill: url(#tile3); stroke: black;" />



      <!-- 图案嵌套 -->

      <defs>
        <pattern id="stripe"
                 patternUnits="userSpaceOnUse"
                 x="0"
                 y="0"
                 width="6"
                 height="6">
          <path d="M 0 0 6 0"
                style="stroke: black; fill: none;" />
        </pattern>
        <pattern id="polkadot"
                 patternUnits="userSpaceOnUse"
                 x="0"
                 y="0"
                 width="36"
                 height="36">
          <circle cx="12"
                  cy="12"
                  r="12"
                  style="fill: url(#stripe); stroke: black;" />
        </pattern>
      </defs>
      <rect x="130"
            y="200"
            width="100"
            height="100"
            style="fill: url(#polkadot); stroke: black;" />














    </svg>

    <script>
      const ele = document.querySelector("#xxx");
      let n = 0;
      function Renderer() {
        n++;
        if (n >= 360) n = 0;
        window.requestAnimationFrame(Renderer);
      }
      // Renderer();
    </script>
  </body>

</html>
